<template>
	<div class="a">
		<van-nav-bar
		  class="fix_header"	
		  title="我的资料"
		  left-arrow
		  @click-left="onClickLeft"
		>		
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
	    </van-nav-bar>	
	    <div class="fix_next"></div>
         
         
        <div class="margin10">
        	
        	<van-cell title="头像" is-link style="display: flex;align-items: center;" @click="changePhoto">
        		<div slot="default">
        			<img :src="data.sheadimgurl" alt="" v-if="data.sheadimgurl" class="touxiang"/>
        			<img src="../../../../../../static/img/lanhu/45.png" alt="" class="touxiang" v-if="showShead"/>
        		</div>
        	</van-cell>
        	
        	<van-cell title="会员名" is-link  :value="data.musername" @click="showMuserNamePopup"/>
        	
        	
        	<van-cell title="昵称"   :value="data.snickname" is-link @click="showNickNamePopup"/>
        	
        	
        	<van-cell title="性别" is-link  :value="formatSex(data.mgender)" @click="showSex=true"/>
        	
        	
        	
        	<van-cell title="常住" is-link :value="formatStr(data.maddress)" @click="changeArea"/>
        	
        	
        	
        	<van-cell title="生日" is-link  :value="data.sbirthday" @click="showTimePopup"/>
        	
        	
        	        	
        	<van-cell title="简介" is-link  :value="formatStr(data.mintroduction)"   @click="showBriefPopup"/>
        	
        	
        	<van-cell title="喜欢的"  :value="formatStr(data.mhobby)"  is-link @click="showMhobbyPopup"/>        	
        </div> 
        
        
        <!--填写会员名-->
		<van-popup
		  v-model="showMuserName"
		  position="right"
		  :style="{ height: '100%',width:'100%'}"
		  :overlay="false"
		>   
		    <!--头部-->
			<van-nav-bar
			  title="编辑会员名"
			  left-arrow			  
			>		
			  <van-icon name="arrow-left" @click="showMuserName=false" slot="left" color="#000" size="20"/>	       
		    </van-nav-bar>		
			<van-field
			  v-model="subData.musername"
			  rows="2"
			  autosize
			  type="textarea"
			  maxlength="25"
			  placeholder="请输入会员名"
			  show-word-limit
			  label-width='0'
			/>		    
		    
		    <div class="briefFoot">
		    	<van-button block color="#FFD630" @click="saveMuserName"><span style="color: #333;font-size: 16px;">保存</span></van-button>
		    </div>		    
		</van-popup>	        

        <!--填写昵称-->
		<van-popup
		  v-model="showNickName"
		  position="right"
		  :style="{ height: '100%',width:'100%'}"
		  :overlay="false"
		>   
		    <!--头部-->
			<van-nav-bar
			  title="编辑昵称"
			  left-arrow			  
			>		
			  <van-icon name="arrow-left" @click="showNickName=false" slot="left" color="#000" size="20"/>	       
		    </van-nav-bar>		
			<van-field
			  v-model="subData.snickname"
			  rows="2"
			  autosize
			  type="textarea"
			  maxlength="25"
			  placeholder="请输入昵称"
			  show-word-limit
			  label-width='0'
			/>		    
		    
		    <div class="briefFoot">
		    	<van-button block color="#FFD630" @click="saveSnickName">
		    		<span style="color: #333;font-size: 16px;">保存</span>
		    	</van-button>
		    </div>		    
		</van-popup>

        <!--选择男女-->
        <van-popup v-model="showSex">
        	<div class="sexPopup">
                <div class="sexRadio" style="border-bottom: 1px #e5e5e5 solid;"  @click="selectSex(1)">男</div>
                <div class="sexRadio" @click="selectSex(2)">女</div>
        	</div>
        </van-popup>   

        
        <!--填写简介-->
		<van-popup
		  v-model="showBrief"
		  position="right"
		  :style="{ height: '100%',width:'100%'}"
		  :overlay="false"
		>   
			<van-nav-bar
			  title="编辑简介"
			  left-arrow			  
			>		
			  <van-icon name="arrow-left" @click="showBrief=false" slot="left" color="#000" size="20"/>	       
		    </van-nav-bar>
			<van-field
			  v-model="subData.mintroduction"
			  rows="5"
			  autosize
			  type="textarea"
			  maxlength="150"
			  placeholder="介绍下自己,让更多人了解你吧..."
			  show-word-limit
			  label-width='0'
			/>		    
		    
		    <div class="briefFoot">
		    	<van-button block color="#FFD630" @click="saveMintroduction"><span style="color: #333;font-size: 16px;">保存</span></van-button>
		    </div>
		</van-popup>
		
        <!--填写我喜欢的-->
		<van-popup
		  v-model="showMhobby"
		  position="right"
		  :style="{ height: '100%',width:'100%'}"
		  :overlay="false"
		>   
			<van-nav-bar
			  title="编辑简介"
			  left-arrow			  
			>		
			  <van-icon name="arrow-left" @click="showMhobby=false" slot="left" color="#000" size="20"/>	       
		    </van-nav-bar>
			<van-field
			  v-model="subData.mhobby"
			  rows="5"
			  autosize
			  type="textarea"
			  maxlength="150"
			  placeholder="介绍下自己的喜好吧..."
			  show-word-limit
			  label-width='0'
			/>		    
		    
		    <div class="briefFoot">
		    	<van-button block color="#FFD630" @click="saveMhobby"><span style="color: #333;font-size: 16px;">保存</span></van-button>
		    </div>
		</van-popup>		
		
		
     
        <!--选择生日-->
		<van-popup
		  v-model="showTime"
		  position="bottom"
		>
			<van-datetime-picker	
			  :show-toolbar="false"		
			  v-model="currentDate"
			  type="date"
			  :min-date="minDate"
			  :max-date="maxDate"
			  ref='dateTime'
			/>		 
			<div class="btnWrap">
				<span class="active" @click="cancelTime">取消</span>
				<span @click="confirmTime">确认</span>
			</div>
		</van-popup>				
        <floor46 ref="floor46" @query="selectArea"></floor46>
		
	</div>	
</template>

<script>
import Floor46 from '_c/market/floor/floor46.vue'		
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	components: {
	     Floor46
	},	
	data() {
       return {
       	  showShead:false,
       	  url1:this.$api+'/marketorderservice/api/v1/market/playerinfoExtension/', // 获取个人信息接口
       	  url2:this.$api+'/marketorderservice/api/v1/market/playerinfoExtension',  // 编辑接口
       	  url3:'/playerinfo/updatePlayerinfoHeadimgurlById', // 编辑个人头像
       	  url4:'/playerinfo/updatePlayerinfoNicknameById',  // 编辑昵称
       	  url5:'/playerinfo/updatePlayerinfoBirthdayById',  // 编辑生日
       	  showMuserName:false,  // 编辑会员名弹框
       	  showBrief:false,      // 简介弹框
       	  showNickName:false,   // 昵称弹框
	      showSex:false,       	// 性别弹框   
	      showMhobby:false,     // 喜好弹框
	      showTime:false,       // 生日弹框     
	      minDate: new Date(1900, 0, 1), // 生日控件区间
	      maxDate: new Date(),  // 生日控件区间
	      currentDate:null,     // 生日控件当前时间
	      userId:'',
	      // 用来显示的数据
	      data:{
	      	sheadimgurl:'',
	      	musername:'',
	      	nuid:'',
	      	maddress:'',
	      	mgender:'',
	      	mhobby:'',
	      	mintroduction:'',
	      	muserid:'',
	      	sbirthday:'',
	      	snickname:''
	      },
	      // 用来提交的数据
	      subData:{
	      	sheadimgurl:'',
	      	musername:'',
	      	nuid:'',
	      	maddress:'',
	      	mgender:'',
	      	mhobby:'',
	      	mintroduction:'',
	      	muserid:'',
	      	sbirthday:'',
	      	snickname:''	      	
	      }
       }
	},
	methods: {
		// 获取个人信息数据
		getData(){
		  let that=this	
		  this.$Axios2.Get(this.url1+this.userId).then(function(res) {
		 	 that.data.sheadimgurl=res.data.sheadimgurl
		 	 if(res.data.sheadimgurl){
		 	 	that.showShead=false
		 	 }else{
		 	 	that.showShead=true
		 	 }
		 	 that.data.musername=res.data.musername?res.data.musername:'请输入会员名'
		 	 that.data.nuid=res.data.nuid
		 	 that.data.snickname=res.data.snickname?res.data.snickname:'请输入昵称'
		 	 that.data.mgender=res.data.mgender?res.data.mgender:'请选择性别'
		 	 that.data.maddress=res.data.maddress?res.data.maddress:'请选择常住地'
		 	 that.data.mintroduction=res.data.mintroduction?res.data.mintroduction:'请输入简介'		 	 		 	 		 	 
		 	 that.data.mhobby=res.data.mhobby?res.data.mhobby:'请填写我喜欢的'
		 	 that.data.sbirthday=res.data.sbirthday?res.data.sbirthday:'请选择生日'	
		 	 that.subData.sbirthday=res.data.sbirthday?res.data.sbirthday:''
		  })
		},
		// 图片上传回调函数
		callJSGetImgUrl(str){		   	
           this.data.sheadimgurl=str  
           let params={
           	"nuid": this.userId,
           	sheadimgurl:str
           }
		   this.$Axios2.Post(this.url3,params)
		},
		// 显示会员名弹框
		showMuserNamePopup(){
			this.showMuserName=true
			this.subData.musername=this.data.musername?this.data.musername:''
		},
		// 保存会员名
		saveMuserName(){
			if(!this.subData.musername){
				this.$toast('会员名不能为空')
				return false
			}
			let params={
				musername: this.subData.musername,
				nuid:this.userId
			}
			let that=this
			this.$Axios2.Post(this.url2,params).then(function(res) {
                 that.showMuserName=false
                 that.data.musername=that.subData.musername
			})
		},
		// 显示昵称弹框
		showNickNamePopup(){
			this.showNickName=true			
			this.subData.snickname=this.data.snickname?this.data.snickname:''
		},
		// 保存昵称
		saveSnickName(){
			if(!this.subData.snickname){
				this.$toast('昵称不能为空')
				return false
			}
			let params={
				snickname: this.subData.snickname,
				nuid:this.userId
			}
			let that=this
			this.$Axios2.Post(this.url4,params).then(function(res) {
                 that.showNickName=false
                 that.data.snickname=that.subData.snickname
			})			
		},
		// 转化性别
		formatSex(str){
			if(str==1){
				str='男'
			}else if(str==2){
				str='女'
			}
			return str
		},
		// 转化地区长度
		formatStr(str){
			if(str.length>=13){
				str=str.substring(0,12)+'...'
			}
			return str
		},
		// 选择性别
		selectSex(num){
			let params={
				mgender:num,
				nuid:this.userId
			}
			let that=this
			this.$Axios2.Post(this.url2,params).then(function(res) {
                 that.showSex=false
                 that.data.mgender=num
			})				
		},	
		// 打开地区弹框
		changeArea(){
			this.$refs.floor46.show()
		},
		// 选择地区
        selectArea(arr){
        	let title=arr[0].name+' '+ arr[1].name +' ' + arr[2].name 
			let params={
				maddress:title,
				nuid:this.userId
			}        	
			let that=this
			this.$Axios2.Post(this.url2,params).then(function(res) {
				 that.data.maddress=title
			})	        	
        },	
        // 简介弹框
        showBriefPopup(){
			this.showBrief=true			
			this.subData.mintroduction=this.data.mintroduction?this.data.mintroduction:''        	
        },
		// 保存简介
		saveMintroduction(){
			if(!this.subData.mintroduction){
				this.$toast('简介不能为空')
				return false
			}
			let params={
				mintroduction: this.subData.mintroduction,
				nuid:this.userId
			}
			let that=this
			this.$Axios2.Post(this.url2,params).then(function(res) {
                 that.showBrief=false
                 that.data.mintroduction=that.subData.mintroduction
			})			
		},  
		// 喜好弹框
        showMhobbyPopup(){
			this.showMhobby=true			
			this.subData.mhobby=this.data.mhobby?this.data.mhobby:''         	
        },
        // 保存喜好
        saveMhobby(){
			if(!this.subData.mhobby){
				this.$toast('喜好不能为空')
				return false
			}
			let params={
				mhobby: this.subData.mhobby,
				nuid:this.userId
			}
			let that=this
			this.$Axios2.Post(this.url2,params).then(function(res) {
                 that.showMhobby=false
                 that.data.mhobby=that.subData.mhobby
			})	        	
        },
		// 选择头像
        changePhoto(){
			if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
			} 
			// 安卓环境下
			else if(navigator.userAgent.match(/android/i)) {
                try {
                  window.loadAndroid.jsOpenCamera(0,1)	
                  return true
                }
                catch(err){
                  return false
                }
			}         	
        },
        // 显示生日控件
        showTimePopup(){
        	this.showTime=true
        	if(this.subData.sbirthday){
		 	 	let arr=this.subData.sbirthday.split('-')
		 	 	this.currentDate=new Date(arr[0],Number(arr[1])-1, arr[2])        		
        	}else{
        		this.currentDate=new Date(1950, 0, 1)
        	}      	
        },
		// 取消选择生日操作
		cancelTime(){
			this.showTime=false
		},
		// 保存生日
		confirmTime(){
			let arr=this.$refs.dateTime.getPicker().getValues()
			let time=arr.join('-')
			let params={
			  "nuid":this.userId,
			  "sBirthday": time			
			}
			let that=this
			this.$Axios2.Post(this.url5,params).then(function(res) {
                 that.showTime=false
                 that.data.sbirthday=time
                 that.subData.sbirthday=time
			})	 			
		}
	},
	mixins:[publicFun],//混入		
	mounted() {
        this.userId=this.$router.currentRoute.query.userId;
        this.getData()
        window.callJSGetImgUrl=this.callJSGetImgUrl         // 挂载获取图片回调方法
	}
}	
</script>

<style scoped lang="scss">
.a{background: #f8f8f8;min-height: 100%;width: 100%;position: absolute;}
.a *{box-sizing: border-box;}	
.margin10{margin: 10px 0;}
.footer{background: #fff;position: absolute;bottom: 0;left: 0;width: 100%;}
.clear{padding: 15px;font-size: 13px;color: #333;}
.out{padding: 10px 30px 20px}
.touxiang{width: 40px;height: 40px;border-radius: 10px;}
.btnWrap{display: flex;
    span.active{border-right: 1px solid #efefef;};    
    span{flex: 1;padding: 15px 0;text-align: center;font-size: 15px;}
}
.sexPopup{width: 300px;background: #fff;}
.sexRadio{padding: 15px;color: #333;font-size: 15px;}
.briefFoot{padding: 20px 37.5px;position: absolute;bottom: 0;left: 0;width: 100%;}
</style>